<template>
	<div>
		<div class="items">
			<div v-if="routeType== 'index'">
				<!-- <childrennav
					:items="routerItems" 
					:active-index="activeIndex"
					:main-router="crmType"
					@nav-select="navSelect">
				</childrennav> -->
				<div class="box">
					<div class="nav">
						<el-menu
							:default-active="activeIndex" 
							background-color="#fff"
							text-color="#666"
							mode="horizontal"
							active-text-color="#b5060d"
							@select="handleSelect">
							<template
								v-for="(item, index) in routerItems" >
									<el-menu-item v-if="!item.hidden" :index="getString(index)">{{ item.meta.title }}</el-menu-item>
							</template>
						</el-menu>
					</div>
				</div>
			</div>
			<div v-else>
				<el-tabs
					v-model="tabCurrentName"
					@tab-click="handleClick">
					<el-tab-pane
						v-for="(item, index) in tabnames"
						:key="index"
						:label="item.label"
						:name="item.name"/>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import {Childrennav} from '@/views/layout/components'
	import { mapGetters } from 'vuex'
	import { managerRouterMenu as customerRouterMenu } from '@/router/modules/customer'
	import { managerRouterMenu as lawcaseRouterMenu } from '@/router/modules/lawcase'
	import { managerRouterMenu as contractRouterMenu } from '@/router/modules/contract'
	import { managerRouterMenu as financeRouterMenu } from '@/router/modules/finance'
	
	export default {
		components: {
			Childrennav
		},
		props: {
			crmType: {
				type: String,
				default: ''
			},
			routeType: {
				type: String,
				default: ''
			},
			// activeIndex: {
			// 	type: [String,Number],
			// 	default: ''
			// }
		},
		data() {
			return {
				routerItems: [],
				tabCurrentName:"basicinfo",
				
				activeIndex:'0'
			}
		},
		computed: {
			...mapGetters(['allAuth']),
			
			
			tabnames() {
				var tempsTabs = []
				if(this.crmType == "customer"){
					if (this.allAuth.customer && this.allAuth.customer.read) {
						tempsTabs.push({ label: '基本资料', name: 'basicinfo' })
					}
					if (this.allAuth.customer && this.allAuth.customer.loglist) {
						tempsTabs.push({ label: '跟进日志', name: 'record' })
					}
					if (this.allAuth.customer && this.allAuth.customer.tolawcase) {
						tempsTabs.push({ label: '面谈/签单', name: 'tolawcase' })
					}
					if (this.allAuth.customer && this.allAuth.customer.actionrecord) {
						tempsTabs.push({ label: '操作记录', name: 'action' })
					}
				}else if(this.crmType == "lawcase"){
					if (this.allAuth.lawcase && this.allAuth.lawcase.read) {
						tempsTabs.push({ label: '基本资料', name: 'basicinfo' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.loglist) {
						tempsTabs.push({ label: '案件进度日志', name: 'record' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.financelist) {
						tempsTabs.push({ label: '财务信息', name: 'finance' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.courtlist) {
						tempsTabs.push({ label: '开庭信息', name: 'court' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.judgmentlist) {
						tempsTabs.push({ label: '判决结果', name: 'judgment' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.preservation) {
						tempsTabs.push({ label: '保全信息', name: 'preservation' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.complain) {
						tempsTabs.push({ label: '客户反馈', name: 'complain' })
					}
					if (this.allAuth.lawcase && this.allAuth.lawcase.actionrecord) {
						tempsTabs.push({ label: '操作记录', name: 'action' })
					}
				}else if(this.crmType == "contract"){
					if (this.allAuth.contract && this.allAuth.contract.read) {
						tempsTabs.push({ label: '基本资料', name: 'basicinfo' })
					}
					if (this.allAuth.contract && this.allAuth.contract.loglist) {
						tempsTabs.push({ label: '服务日志', name: 'record' })
					}
					if (this.allAuth.contract && this.allAuth.contract.financelist) {
						tempsTabs.push({ label: '财务信息', name: 'finance' })
					}
					if (this.allAuth.contract && this.allAuth.contract.contractcomplainindex) {
						tempsTabs.push({ label: '客户反馈', name: 'complain' })
					}
					if (this.allAuth.contract && this.allAuth.contract.actionrecord) {
						tempsTabs.push({ label: '操作记录', name: 'action' })
					}
				}
				
				return tempsTabs
			}
		},
		mounted() {
			let routerMenu
			if(this.crmType == "customer"){
				routerMenu = customerRouterMenu
			}else if(this.crmType == "lawcase"){
				routerMenu = lawcaseRouterMenu
			}else if(this.crmType == "contract"){
				routerMenu = contractRouterMenu
			}else if(this.crmType == "finance"){
				routerMenu = financeRouterMenu
			}
			
			let routerItems = this.filterAsyncRouter(routerMenu, this.allAuth)
			for(var i = 0; i < routerItems.length; i++){
				if(routerItems[i]['meta']['subType'] == this.$router.currentRoute.meta.subType ){
					this.activeIndex = `${i}` 
				}
			}
			
			this.routerItems = routerItems
			
		},
		methods: {
			filterAsyncRouter(routers, authInfo) {
				const res = []
				routers.forEach(router => {
					const tmp = {
						...router
					}
					if (this.checkAuth(tmp, authInfo)) {
						if (tmp.children) {
							tmp.children = this.filterAsyncRouter(tmp.children, authInfo)
						}
						res.push(tmp)
					}
				})
				return res
			},
			
			checkAuth(router, authInfo) {
				// 判断当前路由在权限数组中是否存在
				if (router.meta) {
					const metaInfo = router.meta
					if (!metaInfo.requiresAuth) {
						return true
					} else {
						if (metaInfo.index == 0) {
							return !!authInfo[metaInfo.type]
						} else if (metaInfo.index == 1) {
							if (authInfo[metaInfo.type]) {
								return !!authInfo[metaInfo.type][metaInfo.subType]
							}
							return false
						} else {
							var typeAuth = authInfo[metaInfo.type]
							for (let index = 0; index < metaInfo.subType.length; index++) {
								const field = metaInfo.subType[index]
								typeAuth = typeAuth[field]
								if (typeAuth && metaInfo.subType.length - 1 == index) {
									return true
								} else if (!typeAuth) {
									return false
								}
							}
						}
					}
				}
				return true
			},
			
			
			handleClick(tab, event){
				this.$emit("on-handle",tab.name)
			},
			
			
			// 辅导航选择
			// navSelect(key){
			// 	this.$emit("nav-handle",key)
			// 	this.$router.push(this.routerItems[key].path)
			// },
			
			handleSelect(key){
				this.activeIndex = key
				this.$router.push(this.routerItems[key].path)
			},
			
			getString(index){
				return `${index}`
			}
		},
	}
</script>

<style scoped>
	.items{
		display: flex;
		background-color: #f2f2f2; 
		align-items: center; 
		flex-direction: column; 
	}
	/deep/ .el-tabs {
		margin-top: 10px;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 1200px;
	}
	
	/deep/ .el-tabs__header {
		border-bottom: none;
		position: relative;
		margin: 0;
	}
	
	/deep/ .el-tabs__active-bar {
		background-color: #b5060d !important;
		height: 0px !important;
	}
	/deep/ .el-tabs__item{
		padding: 0 20px !important;
		height: 45px !important;
		line-height: 45px !important;
	}
	/deep/ .el-tabs__item.is-active {
		color: #fff !important;
		background-color: #b5060d !important;
	}
	
	
	
	.box {
		width: 1200px;
		margin-top: 10px;
	}
	
	.nav {
		margin-top: 0px;
		background-color: #fff;
		height: 45px;
		display: flex;
	}
	
	.nav_item {
		color: #545454;
		font-weight: 600;
		/* padding: 0 40px; */
	}
	
	/deep/ .el-menu--horizontal > .el-menu-item.is-active {
	    background-color: #b5060d !important;
	    color: #fff !important;
	}
	/deep/ .el-menu--horizontal > .el-menu-item {
	    height: 45px;
	    line-height: 45px;
	}
</style>